<template>
  <div class="all-page">
    <!-- 返回按钮 -->
    <el-button type="primary" class="back-button" @click="back">返回上级页面</el-button>

    <!-- 报审表 -->
    <div class="page">
      <div class="document-header">
        <h1 class="document-title">工程材料、构配件、设备报审表</h1>
      </div>
      <table class="main-table">
        <!-- 项目信息行 -->
        <tr>
          <td rowspan="2" colspan="2" class="info-label">工程名称</td>
          <td rowspan="2" colspan="3" class="info-value">
            {{ reportData.subprojectName || "/" }}
          </td>
          <td class="info-label">编号</td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td class="info-label">检验日期</td>
          <td colspan="2" class="info-value">
            {{ reportData.witnessDate || "/" }}
          </td>
        </tr>

        <!-- 表头 -->
        <tr class="header-row">
          <td rowspan="2">序号</td>
          <td rowspan="2">名称</td>
          <td rowspan="2">规格型号</td>
          <td rowspan="2">进场数量(T)</td>
          <td>生产厂家</td>
          <td>外观检验项目</td>
          <td>试件编号</td>
          <td rowspan="2">备注</td>
        </tr>
        <tr class="header-row">
          <td>质量证明书编号</td>
          <td>检验结果</td>
          <td>复验结果</td>
        </tr>

        <!-- 数据行 -->
        <template v-for="(item, index) in reportData.steelMaterialList">
          <tr :key="'first-' + index">
            <td rowspan="2">{{ index + 1 }}</td>
            <td rowspan="2">钢筋</td>
            <td rowspan="2">
              {{ item.steelType + "C" + item.diameter || "/" }}
            </td>
            <td rowspan="2">{{ item.batchAmount || "/" }}</td>
            <td>{{ item.producer || "/" }}</td>
            <td>外观质量</td>
            <td>/</td>
            <td rowspan="2"></td>
          </tr>
          <tr :key="'second-' + index">
            <td>{{ item.batchAmount || "/" }}</td>
            <td>合格</td>
            <td>/</td>
          </tr>
        </template>

        <!-- 检查意见行 -->
        <tr>
          <td colspan="8" class="opinion-cell">
            <div class="opinion-section">
              <span class="label">检查意见(施工单位)：</span>
              <div class="opinion-textarea"></div>
            </div>
            <div class="attachment-info">
              <span>附件：共 <span class="special-underline">/</span> 页</span>
            </div>
          </td>
        </tr>

        <!-- 验收意见行 -->
        <tr>
          <td colspan="8" class="acceptance-cell">
            <div class="acceptance-section">
              <span class="label">验收意见(监理/建设单位)：</span>
              <div class="opinion-textarea"></div>
            </div>
            <div class="acceptance-options">
              <label class="checkbox-label">
                <input type="checkbox" :checked="reportData.acceptanceStatus === 'agree'" disabled />
                <span>同意</span>
              </label>
              <label class="checkbox-label">
                <input type="checkbox" :checked="reportData.acceptanceStatus === 'reinspect'" disabled />
                <span>重新检验</span>
              </label>
              <label class="checkbox-label">
                <input type="checkbox" :checked="reportData.acceptanceStatus === 'withdraw'" disabled />
                <span>退场</span>
              </label>
              <span class="acceptance-date">验收日期：___ 年 ___ 月 ___ 日</span>
            </div>
          </td>
        </tr>

        <!-- 签名栏 -->
        <tr>
          <td rowspan="3">签字栏</td>
          <td rowspan="2" colspan="2">施工单位(章)</td>
          <td rowspan="2" colspan="2"></td>
          <td>专业质检员</td>
          <td>专业工长</td>
          <td>检验员</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">监理或建设单位(章)</td>
          <td colspan="3"></td>
          <td>专业工程师</td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import router from "@/router";

export default {
  data() {
    return {
      loading: true, // 这是一个加载标识
      reportData: {}, // 这是报表数据接收变量
      localStorageId: "", // 用于存储id
      taskId: "",
      // 默认材料数据
      defaultMaterials: [
        {
          serialNumber: 1,
          name: "钢筋",
          specification: "HRB400EC18",
          quantity: "15.120",
          manufacturer: "宁夏建龙特钢有限公司",
          certificateNumber: "JLNX-2024-62591",
          inspectionItem: "外观质量",
          inspectionResult: "合格",
          testPieceNumber: "",
          reinspectionResult: "/",
          remarks: "",
        },
        {
          serialNumber: 2,
          name: "钢筋",
          specification: "HRB400EC18",
          quantity: "7.560",
          manufacturer: "宁夏建龙特钢有限公司",
          certificateNumber: "JLNX-2024-62591",
          inspectionItem: "外观质量",
          inspectionResult: "合格",
          testPieceNumber: "",
          reinspectionResult: "/",
          remarks: "",
        },
      ],
    };
  },
  async mounted() {
    const localStorageId = this.$route.query.localStorageId;
    this.localStorageId = localStorageId; // 保存id用于销毁时清理
    if (localStorageId) {
      const data = localStorage.getItem(localStorageId);
      if (data) {
        this.reportData = JSON.parse(data);
        this.taskId = this.reportData.taskId;
        console.log(this.reportData);
        console.log("taskId为:" + this.taskId);
      }
    }
  },
  beforeDestroy() {
    // 这个钩子函数用来退出的时候清除本地存储的数据 防止数据堆积在浏览器里
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId);
    }
    document
      .querySelector("body")
      .setAttribute("style", "background-color: white;"); // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f5f5f5;"); // 设置对比色
  },
  methods: {
    back() {
      router.push({ path: "/menus/statement" });
    },
  },
};
</script>

<style scoped>
.all-page {
  width: 100%;
  padding-bottom: 5%;
}

/* 返回按钮样式 */
.back-button {
  position: fixed;
  top: 1.5rem;
  left: 6.25rem;
  z-index: 1000;
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.back-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.page {
  font-family: "Times New Roman", "宋体", sans-serif;
  padding: 4% 4% 0;
  width: 60%;
  aspect-ratio: 1 / 1.414;
  margin: 5% auto;
  background-color: white;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  line-height: 1.25rem;
}

.document-header {
  text-align: center;
  margin-bottom: 2%;
}

.document-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  padding: 2% 0;
}

.info-row {
  padding-left: 2%;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  align-items: center;
}

.label {
  font-weight: bold;
  white-space: nowrap;
}

.value {
  margin-right: 3%;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.blank-box {
  display: inline-block;
  width: 3rem;
}

/* 部分文字的下划线 */
.special-underline {
  border-bottom: 0.0938rem solid #333;
  padding: 0 1rem 0.125rem;
  border-radius: 0.0625rem;
}

.kai-font {
  font-family: "Times New Roman", "楷体", "KaiTi", "STKaiti", sans-serif;
  font-size: 0.9375rem;
}

.indent-font {
  text-indent: 2rem;
}

.main-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.18rem solid #000;
  table-layout: fixed;
}

.main-table td {
  border: 0.1rem solid #000;
  padding: 1.5%;
  text-align: center;
  vertical-align: middle;
}

.main-table td:nth-child(1) {
  width: 10%;
}

.main-table td:nth-child(2) {
  width: 45%;
}

.main-table td:nth-child(3) {
  width: 15%;
}

.main-table td:nth-child(4) {
  width: 30%;
}

/* 调整行高 */
.main-table tr {
  height: 3rem;
}

/* 项目信息行高度 */
.main-table tr:nth-child(1),
.main-table tr:nth-child(2) {
  height: 4rem;
}

/* 表头行高度 */
.header-row {
  height: 3.5rem;
}

/* 数据行高度 */
.main-table tr:not(.header-row):not(:nth-child(1)):not(:nth-child(2)):not( :nth-child(3)):not(:nth-child(4)) {
  height: 3.5rem;
}

/* 意见行高度 */
.opinion-cell,
.acceptance-cell {
  height: 6rem;
}

/* 签名栏行高度 */
.signature-header,
.signature-space {
  height: 3rem;
}

/* 信息单元格样式 */
.info-cell {
  text-align: left !important;
  padding: 2% !important;
}

.info-label {
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  width: 8%;
}

.info-value {
  text-align: left;
  padding: 1rem;
  vertical-align: middle;
}

/* 表头样式 */
.header-row {
  font-weight: bold;
}

.header-row td {
  font-weight: bold;
}

/* 意见单元格样式 */
.opinion-cell,
.acceptance-cell {
  text-align: left !important;
  padding: 2% !important;
}

.opinion-section,
.acceptance-section {
  margin-bottom: 1rem;
}

.opinion-textarea {
  min-height: 3rem;
  padding: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 0.25rem;
}

.attachment-info {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #666;
}

/* 验收选项样式 */
.acceptance-options {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.acceptance-date {
  margin-left: auto;
  font-size: 0.875rem;
}
</style>
